<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="list"></ul>
    <script>
        console.log(window.document.createDocumentFragment);

        // 需求：要求在页面中创建100000个li,li里面的内容是这是第xx个元素
        /* var parent = document.querySelector('.list');
        for(var i=0; i<500000;i++){
            // 创建li标签
            var li = document.createElement('li');
            // 创建标签内部的文本
            var text = document.createTextNode(+i);
            // 把创建的文本加入到li当中
            li.appendChild(text);

            // 将创建的子元素加入到父元素当中
            parent.appendChild(li);
            
            // 这个效果 反复的操作DOM，不断进行重排重绘回流，浪费性能 效率低 页面卡死

        } */

        // fragment
        var parent = document.querySelector('.list');
        // fragment 把所有的li都加入到虚拟元素内部，形成<fragment><li></li> 1000000</fragment>
        // 再将虚拟元素加入到ul当中   操作DOM就操作了1次
        var frag = document.createDocumentFragment();
        for(var i=0;i<500000;i++){
            var li = document.createElement('li');
            var text = document.createTextNode(+i);
            li.appendChild(text);
            frag.appendChild(li);
        }

        parent.appendChild(frag);

    </script>
</body>
</html>